<template>
	<view class="detail-pages pages">
		<CustomNav title="会员" :active="{textColor:'#fff',background:'#32005B'}" :is-back="true"></CustomNav>
		<view class="article-tab">
			<image mode="widthFix" style="width: 500rpx;"
				src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/member_title.png">
			</image>
		</view>
		<view class="info-block">
			<mp-html :content="content"></mp-html>
		</view>
		<view class="agree-block">
			<checkbox-group @change="onAgreeChange">
				<checkbox :checked="isChecked" style="color: white;font-size: 30rpx;">我已阅读并同意<span
						style="text-decoration: underline;"
						@click="navigate('/page_other/mine/article?code='+'vip_open')">《会员服务开通协议》</span></checkbox>
			</checkbox-group>
		</view>

		<view class="step" @click="updateVip">
			立即开通
		</view>
	</view>
</template>

<script>
	import {
		updateMember,
		getUserAgreement
	} from '@/api/user.js'
	import {
		getUserInfo
	} from '@/api/home.js';
	export default {

		noticeActive: {
			handler(val) {
				this.noticeActive = val
				// this.getAreaBaseList()
			},
			immediate: true
		},
		data() {
			return {
				info: {
					id: null,
					dayLimit: '10',
					integral: '20',
					userTodayCount: '5',
					description: ''
				},
				isChecked: false, // 新增：用于追踪用户是否同意协议
				content: '',
				areaId: 0
			}
		},
		methods: {
			// 新增：处理用户同意状态变化
			onAgreeChange(e) {

				this.isChecked = !this.isChecked;
			},
			getUserAgreement() {
				getUserAgreement({
					code: 'vip'
				}).then(res => {

					this.content = res[0].context
				})
			},
			updateVip() {
				if (!this.isChecked) {
					uni.showToast({
						title: '请先阅读并同意会员开通协议',
						icon: 'none',
					});
					return;
				}
				if (this.areaId !== 0) {
					uni.showLoading({
						title: '加载中',
						mask: true,
					})
					updateMember().then((res) => {
						uni.hideLoading()
						let appId = res.appId;
						let timeStamp = res.timeStamp;
						let nonceStr = res.nonceStr;
						let signType = res.signType;
						let paySign = res.paySign;
						let prepayId = res.prepayId;
						let prePayParams = res.prePayParams;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: timeStamp,
							nonceStr: nonceStr,
							package: res.package,
							signType: 'MD5',
							paySign: paySign,
							success(res) {
								uni.showToast({
									title: '升级会员成功',
									duration: 2000,
									mask: true,

								})
								uni.redirectTo({
									url: '/page_other/password/password'
								})
							}
						});
					});
				} else {
					this.showToast('请完善您的个人信息！', () => {
						this.navigate('/page_other/mine/details')
					}, 1000)
				}
			},
			getInfo() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getUserInfo().then(res => {
					if (res.areaId) {
						this.areaId = res.areaId
					} else {
						this.areaId = 0
					}
				})
			}
		},
		onLoad() {
			this.getInfo()
			this.getUserAgreement()
		},
		onUnload() {},
	}
</script>
<style lang="scss" scoped>
	.detail-pages {
		overflow: hidden;
		min-height: 100vh;
		width: 100%;
		background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/raffle_bg.png')center no-repeat;
		background-size: 100%;

		.top-banner {
			width: 100%;
			position: absolute;
		}

		.step {
			width: 70%;
			height: 100rpx;
			display: flex;
			background: linear-gradient(270deg, #FFC43F 0%, #FDD401 100%);
			color: #FF2F34;
			margin: 30rpx auto;
			border-radius: 60rpx;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 30rpx;
			right: 118rpx;
		}

		.article-tab {
			position: absolute;
			left: 50%;
			// top: 50%;
			transform: translate(-50%, -50%);
			top: 300rpx;
		}

		.info-block {
			width: 92%;
			padding: 100rpx 30rpx 60rpx;
			position: relative;
			margin: 440rpx auto 0;
			border-radius: 20rpx;
			background-image: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/member_bg.png');
			background-size: 100%;
			background-repeat: no-repeat;

			.info {
				// display: flex;
				line-height: 44rpx;
				font-size: 28rpx;
				color: #1A1A1A;
				font-weight: 400;
				margin-bottom: 20rpx;

				.title {
					font-family: FZHanZhenGuangBiaoS-GB;
					font-weight: 400;
					font-size: 28rpx;
					color: #FF2F34
				}
			}

			.small-title {
				font-family: FZHanZhenGuangBiaoS-GB;
				font-weight: 400;
				font-size: 28rpx;
				color: #FF2F34
			}


		}

		.agree-block {
			width: 92%;
			position: relative;
			margin: 30rpx auto;

		}

		.agree-checkbox {
			margin-top: 20rpx;
		}

	}
</style>